<template>
  <div class="select-products">
    <header>
      <p>选择商品</p>
      <div class="action-wrap">
        <el-input
          v-model="searchkey"
          style="width: 240px"
          placeholder="输入品牌、商品分类都可快速找到"
          :suffix-icon="Search"
          @keydown.enter="handleEnter"
        >
          <template #prepend>
            <el-select v-model="data.selectValue" placeholder="Select" style="width: 115px">
              <el-option label="商品id" value="1" />
              <el-option label="商品名称" value="2" />
              <el-option label="商品分类" value="3" />
            </el-select>
          </template>
        </el-input>
        <el-button class="ml32" type="info" plain @click="handelClickBack">返回</el-button>
      </div>
    </header>
    <div class="list">
      <div v-for="(item, index) in data.list" :key="index" class="item">
        <img :src="item.mainPicUrl" alt="" />
        <div>
          <p class="text-over">{{ item.productName }}</p>
          <b class="price">¥ {{ item.factoryLowestPrice }}</b>
          <el-button type="primary" @click="openDialog(item)">添加到入库单</el-button>
        </div>
      </div>
    </div>

    <!-- 商品详情 -->
    <prodDetail :optionInfo="optionInfo" @close="close" @add="handelClickAdd" />
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import prodDetail from "./prodDetail";
import { getBusinessListings, getDetail, saveTempProduct } from "@/apis/procure/index";
const useRout = useRoute();
const useRoutes = useRouter();
const optionInfo = ref({ isShow: false, detail: {} });
const searchkey = ref("");
const data = reactive({
  list: [],
  selectValue: "3"
});
const openDialog = item => {
  // return
  optionInfo.value.isShow = true;

  getDetail({ productId: item.productId }).then(res => {
    console.log(res);
    optionInfo.value.detail = res.data;
  });
};

const close = () => {
  optionInfo.value.isShow = false;
};
// 获取商品列表
const getBusinessListingsList = () => {
  console.log(useRout.query.factoryId, "useRout.query.factoryId");
  let obj = {
    factoryId: useRout.query.factoryId,
    size:10000
    // productId:'1',//商品id
    // productName:"",//商品名称
    // categoryName:"",//商品分类
  };
  if (data.selectValue === "1") {
    obj.productId = searchkey.value;
    delete obj.productName;
    delete obj.categoryName;
  } else if (data.selectValue === "2") {
    obj.productName = searchkey.value;
    delete obj.productId;
    delete obj.categoryName;
  } else if (data.selectValue === "3") {
    delete obj.productId;
    delete obj.productName;
    obj.categoryName = searchkey.value;
  }
  getBusinessListings(obj).then(res => {
    data.list = res.data.records;
  });
};
const handleEnter = () => {
  getBusinessListingsList();
};
const handelClickAdd = skuId => {
  optionInfo.value.isShow = false;
  saveTempProduct({ skuId, code: useRout.query.code }).then(res => {
    console.log(res);
    ElMessage({
      type: "success",
      message: "添加到入库单成功"
    });
  });
};
const handelClickBack = () => {
  if (useRout.query.edit) {
    useRoutes.push({
      path: "/procure/purchase-order/refuse-order",
      query: {
        code: useRout.query.code,
        num: useRout.query.num,
        purchaseOrderId: useRout.query.purchaseOrderId,
        edit: true
      }
    });
  } else {
    useRoutes.push({
      path: "/procure/purchase-order/detail",
      query: {
        code: useRout.query.code,
        num: useRout.query.num,
        purchaseOrderId: useRout.query.purchaseOrderId
      }
    });
  }
};
onMounted(() => {
  getBusinessListingsList();
});
</script>

<style lang="scss" scoped>
.select-products {
  height: calc(100% - 20px);
  overflow-y: auto;
  padding: 0 20px 20px 20px;
  header {
    background-color: white;
    padding: 14px 20px;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
    margin: 0 -20px;
    border-radius: 10px 10px 0 0;
    p {
      color: #131414;
      font-size: 18px;
      position: relative;
      padding-left: 14px;
      &::before {
        position: absolute;
        content: "";
        left: 0;
        top: 8px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #409eff;
      }
    }
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    .item {
      box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 275px;
      margin: 0 20px 20px 0;
      img {
        height: 200px;
        width: 100%;
        border-radius: 10px;
      }
      & > div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20px;
        p {
          margin-bottom: 20px;
        }
        .price {
          margin-bottom: 24px;
        }
      }
    }
  }
}
</style>
